<template>
  <div class="preview">
    <div class="preview-tool">
      <Button @click="exportHTML">导出html文件</Button>
    </div>
    <div v-if="previewConfig" id="preview-page">
      <div class="box">
        <div class="title" v-html="previewConfig.title"></div>
        <div class="description " v-html="previewConfig.description"></div>
        <div class="imageBox">
          <img v-for="item in previewConfig.picFile" :src="item.base64" alt="" class="imageBox-img"/>
        </div>
      </div>
    </div>
    <ModalExport ref="modalExport" errorTips="html名称不能为空" label="html文件名称"
                 @handleConfirm="handleExport"></ModalExport>
  </div>

</template>
<script>
import ModalExport from "@/components/ModalExport/index.vue";
import {fileExport} from "@/util/file";
import templateGenerate from '@/util/templateGenerate'

export default {
  components: {
    ModalExport
  },
  name: "Preview",
  data() {
    return {
      previewConfig: null,
      modal: {
        show: false,
        templateName: ''
      }
    }
  },
  mounted() {

    // 读取临时配置
    const previewConfig = window.sessionStorage.getItem('Home_to_Preview_previewConfig')
    console.log(previewConfig)
    this.previewConfig = JSON.parse(previewConfig)
  },
  methods: {
    handleExport(templateName) {
      const pageDom = document.getElementById('preview-page');
      const pageHTML = templateGenerate({body: pageDom.innerHTML})
      // const file = new File([pageHTML], templateName + '.html', {type: 'text/html'});
      fileExport(pageHTML, templateName + '.html', {type: 'text/html'})
      this.$Message.success('导出成功')
    },
    exportHTML() {
      this.$refs.modalExport.open()
    }
  }
}
</script>
<style lang="scss">
@import '@/assets/template/index';
@import '@/assets/template/webscrollbar';
</style>
<style lang="scss" scoped>
.preview-tool {
  position: absolute;
  right: 32px;
  top: 8px;
}


@import '@/assets/template/page';
</style>
